$red: #FF5A5A;
$orange: #FF9800;
$yellow:#ff976a;
$green:#07c160;
$cyan:#009688;
$blue: #1989fa;
$purple: #a567e2;
$pink: #ff679b;
$black: #0a0a0a;
$brown: #795548;
$grey: #888;
$muted: #98a6ad;
$light: #b2b2b2;
$grey9: #999;
$greyD: #DDD;
$line: #ebedf0;
$f5: #f5f5f5;
$f7: #f7f7f7;
$f9: #f9f9f9;

$light-red: #ffd2d2;
$light-orange: #ffdeac;
$light-yellow: #fed8c8;
$light-green: #e6fff2;
$light-cyan: #c1fff9;
$light-blue: #e7efff;
$light-purple: #ebd6ff;
$light-pink: #ffd7e5;
$deep-red: #dc0101;
$deep-orange: #d7870e;
$deep-yellow: #ff6422;
$deep-green: #007337;
$deep-cyan: #004a42;
$deep-blue: #0036a3;
$deep-purple: #5700af;
$deep-pink: #ff2a74;

$line: #ebedf0;
$font: #333;
$bg:#f8f8f8;
$font-s: #5B5B5B;

$ft-11: 11px;
$ft-13: 13px;
$ft-15: 15px;
$ft-17: 17px;
$ft-19: 19px;
$ft-24: 24px;

$shadow:rgb(242, 242, 242) 0px 0px 10px 0px;

// 字体颜色类 c = color
@each $color, $val in (red, $red),(orange, $orange),(yellow,$yellow),(green,$green),(cyan, $cyan),(blue, $blue),(purple, $purple),(pink,$pink),(grey,$grey){
    .c-#{$color}{color: $val};
}

// 状态颜色值
$state-color : $red, $orange, $yellow, $green, $cyan, $blue, $purple, $pink, $grey;
@each $c in $state-color{
    $i:index($state-color,$c);
    .state-#{$i}{
        color: nth($state-color,$i);
    }
}
.state-0{color:$red;}

// 类型颜色值
$tag-color: $red, $orange, $yellow, $green, $cyan, $blue, $purple, $pink, $grey;
.tag-border{border:1px solid $line;height:22px;line-height:22px;padding:0 8px;background:#fff;}
@each $c in $tag-color{
    $i: index($tag-color, $c);
    .fillet-#{$i}{
        border-radius:4px;
        color:nth($tag-color, $i);border-color:nth($tag-color, $i);
    }
    .round-#{$i}{
        border-radius:50%;
        color:nth($tag-color, $i);border-color:nth($tag-color, $i);
    }
}

// 字体大小 fs = font-size
@each $font in 12, 13, 14, 15, 16, 17, 18, 20, 21, 22, 24, 28, 30, 32, 36, 42, 46, 48{
    .ft-#{$font}{font-size: $font + px};
}
.fs-10{font-size:20px;transform: scale(0.5);}
// 宽度百分比 per = percent
@each $percent in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100{
    .per-#{$percent}{width: $percent + '%'};
}
// 宽度像素 wd = width
@each $width in 16, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180,190, 200, 210, 240, 250, 280, 300{
    .wd-#{$width}{width: $width + px};
}
// 最小宽度像素 mwd = min-width
@each $width in 16, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180,190, 200, 210, 240, 250, 280, 300{
    .mwd-#{$width}{min-width: $width + px};
}
// 剩余宽度 wd-calc = width: calc(); 
@each $width in 16, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180,190, 200, 210, 240, 250, 280, 300{
    .wd-calc-#{$width}{width: calc(100% - #{$width}px)};
}
// 间隔 m = margin, p = padding, t = top, b = bottom, r = right, l = left, x = left right, y = top bottom, a = top right bottom left;
@each $size in 5, 6, 8, 10, 12, 14, 15, 16, 18, 20, 24, 25, 30, 40, 50, 60, 70, 80, 90, 100 {
    .m-t-#{$size}{margin-top:$size + px;}
    .m-b-#{$size}{margin-bottom:$size + px;}
    .m-l-#{$size}{margin-left:$size + px;}
    .m-r-#{$size}{margin-right:$size + px;}
    .m-x-#{$size}{margin-left:$size + px;;margin-right:$size + px;}
    .m-y-#{$size}{margin-top:$size + px;;margin-bottom:$size + px;}
    .m-a-#{$size}{margin:$size + px;}
    .p-t-#{$size}{padding-top:$size + px;}
    .p-b-#{$size}{padding-bottom:$size + px;}
    .p-l-#{$size}{padding-left:$size + px;}
    .p-r-#{$size}{padding-right:$size + px;}
    .p-x-#{$size}{padding-left:$size + px;;padding-right:$size + px;}
    .p-y-#{$size}{padding-top:$size + px;;padding-bottom:$size + px;}
    .p-a-#{$size}{padding:$size + px;}
}